<template>
<div class="nav">
  <header>
      <div class="user-nav">
          <img :src="`${loginUser.id>0?loginUser.userAvatar:'https://img.51miz.com/Element/00/88/60/42/3cb805be_E886042_a75650be.png'}`" >
          <div class="user-info" @click="router.push('/user/login')">
              <p class="user-name">{{loginUser.id>0?loginUser.userName:"未登录"}}</p>
              <div class="user-like">
                  <p>我的关注</p>
                  &nbsp;&nbsp;
                  <p>收货地址</p>
              </div>
          </div>
      </div>
      <font-awesome-icon :icon="['fas', 'gear']" />
  </header>
    <div class="my-order">
        <h5>我的订单</h5>
        <ul>
            <li>
                <font-awesome-icon :icon="['fas', 'file-lines']" />
                <p>全部</p>
            </li>
            <li>
                <font-awesome-icon :icon="['fas', 'truck']" />
                <p>配送中</p>
            </li>
            <li>
                <font-awesome-icon :icon="['fas', 'comment']" />
                <p>待评价</p>
            </li>
            <li>
                <font-awesome-icon :icon="['fas', 'sack-xmark']" />
                <p>退款</p>
            </li>
        </ul>
    </div>
    <div class="my-order">
        <h5>更多功能</h5>
        <ul>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
            <li>
                <font-awesome-icon class="gear" :icon="['fas', 'caret-down']" size="2x"/>
                <p>功能</p>
            </li>
        </ul>
    </div>
</div>
  <my-footer/>
</template>

<script setup lang="ts">
import MyFooter from "../components/Footer.vue";
import {userStore} from "../store/user.ts";
import router from "../router";
const store = userStore();
const loginUser = store.loginUser;
</script>

<style scoped>

header{
    display: flex;
    justify-content: space-between;
}
.nav{
    width: 99%;
    height: 100%;

    background-color: #F4F8FB;
}
.user-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1.2vw;
}
.user-nav img{
    width: 15.5vw;
    height: 15.5vw;
}
.user-info{
    margin-left: 1.2vw;
}
.user-info .user-name{
    font-size: 5.5vw;
    margin-bottom: 0;
}
.user-like{
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-like p{
    font-size: 3.5vw;
  margin-top: 0;
}
.my-order{
    display: flex;
    flex-direction: column;
    background-color: #FFffff;
    border-radius: 25px;
    width: 90%;
    margin: 3.5vw auto 0;
}
.my-order h5{
    margin: 0;
    text-align: left;
    padding-left: 2.5vw
}
.my-order ul{
    margin-top: 1.5vw;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(75px,1fr));
}
.my-order ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.my-order ul li p{
    font-size: 3.5vw;
    font-family: sans-serif;
}
</style>
